<script lang="ts" setup>
import { ref, computed, watch, onMounted, PropType } from 'vue';
import ATabsCard from '../myCreate/components/aTabsCard/index.vue';
import DemandDetailTabs from './demandDetailTabs.vue'
import LevelHightIcon from '@/assets/images/level_hight_icon.svg';
import LevelMiddleIcon from '@/assets/images/level_middle_icon.svg';
import LevelSlotIcon from '@/assets/images/level_slot_icon.svg';
import {approvalType, statusColor} from '@/constants/approvalCenter'
import API from '@/services';
const props = defineProps({
  checkDetail: {
    type: Array as PropType<any>
  }
})

const visible = ref<boolean>(false)

const detailFormData:any=ref()
const visibleFn = () => {
    visible.value = true
}
enum levelDemand {
  'HIGH' = LevelHightIcon,
  'MEDIUM' = LevelMiddleIcon,
  'LOW' = LevelSlotIcon,
}

defineExpose({
    visibleFn
})
watch(
  () => props.checkDetail,
  (val) => {
    if (val) {
      detailFormData.value = val
    }
  }
);
</script>

<template>
    <a-drawer 
          :visible="visible" 
          @cancel="() => visible = false" 
          :esc-to-close = "false"
          :mask-closable="false"
          placement="right"
          width="720px"
          :footer="false"
          class="approval-drawer-wrapper"
          unmountOnClose>
          <template #title>
            <span class="fw">查看详情</span>
          </template>
          <div class="dev-drawer">
            <a-form 
              :model="detailFormData" 
              auto-label-width
            >
              <a-form-item 
                  show-colon
                  label="需求名称"
              >
                <span>{{detailFormData.demandName}}</span>
              </a-form-item>
              <a-form-item 
                  show-colon
                  label="优先级"
              >
                <img :src="levelDemand[detailFormData.priorityLevel]" alt="" />
                <span class="ml-6">{{detailFormData.priorityLevelDesc}}</span>
              </a-form-item>
              <a-form-item 
                  show-colon
                  label="需求描述"
              >
                <span>{{detailFormData.description}}</span>
              </a-form-item>
              <a-form-item 
                  show-colon
                  label="需求状态"
              >
                <span :class="['dot-col', statusColor[detailFormData.status+'']]"></span>
                <span class="ml-6">{{detailFormData.statusDesc}}</span>
              </a-form-item>
              <a-form-item 
                  show-colon
                  label="需求ID"
              >
                <span>{{detailFormData.id}}</span>
              </a-form-item>
            <ATabsCard 
              :formList="detailFormData.detailList"
            >
              <template #content="{item, index}">
                <div class="add-card-metrics">
                  <DemandDetailTabs 
                    :tabsItem="item"
                  />
                </div>
              </template>
            </ATabsCard>
            </a-form> 
          </div>
        </a-drawer>
</template>

<style lang="scss" scoped>
.dot-col {
  width: 8px;
    height: 8px;
    border-radius: 4px;
    display: inline-block;
}
.add-card-metrics {
    background: #F6F8FC;
    border-radius: 3px;
    
}
.dev-drawer {
  :deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
    text-align: center;
    line-height: 34px;
    border-radius: 0;
    padding: 0 18px;
  }
  :deep(.arco-form-item) {
    margin-bottom: 4px;
  }
}
.approval-drawer-wrapper {
  :deep(.arco-drawer-body) {
    padding-top: 7px;

  }
  :deep(.arco-form-item) {
    margin-bottom: 4px;
    align-items: baseline;
  }
}
</style>